<template>
  <div class="passing-logs h-100P w-100P flex-column">
    <query-container class="query-container" @search="handleSearch" @reset="handleReset">
      <!-- 查询条件 -->
      <div class="justify-between">
        <el-form
          ref="queryForm"
          inline
          :model="page"
          label-position="left"
          :label-width="handleScreenWidthToVw(90)+'px'"
        >
          <el-form-item label="车辆类型" prop="org">
            <el-select
              ref="orgSelect"
              v-model="page.identityEnum"
              placeholder="请选择"
              class="select-width"
            >
              <el-option
                v-for="(type,i) in typeOptions"
                :key="i"
                :label="type.name"
                :value="type.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="通行检测点" prop="deviceId">
            <el-select v-model="page.deviceId" placeholder="请选择" style="width: 250px;">
              <el-option
                v-for="(device,i) in deviceData"
                :key="i"
                :label="device.remarkName"
                :value="device.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通行状态" prop="state">
            <el-select v-model="page.iotBizEnum" placeholder="请选择" class="select-width">
              <el-option
                v-for="(inner,i) in innerState"
                :key="i"
                :label="inner.label"
                :value="inner.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="黑名单" prop="black">
            <el-select v-model="page.black" placeholder="请选择" class="select-width">
              <el-option
                v-for="(black,i) in blacks"
                :key="i"
                :label="black.label"
                :value="black.value"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="车牌号" prop="licensePlate">
            <el-input
              v-model="page.licensePlate"
              placeholder="请输入车牌号"
              clearable
              class="select-width"
            ></el-input>
          </el-form-item>
          <el-form-item label="车主姓名" prop="name">
            <el-input
              v-model="page.name"
              placeholder="请输入车主姓名"
              clearable
              class="select-width"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </query-container>

    <div class="flex-sub">
      <el-table
        :data="tableData"
        header-cell-class-name="table-header-cell"
        height="98%"
        header-row-class-name="table-header-row"
      >
        <el-table-column label="通行时间">
          <template slot-scope="scope">
            {{scope.row.deviceVO.activeTime|dateTimeFormatter}}
          </template>
        </el-table-column>
        <el-table-column prop="recordsCarVO.carNo" label="车牌号"></el-table-column>
        <el-table-column prop="name" label="车辆类型"></el-table-column>
        <!-- <el-table-column label="黑名单">
          <template slot-scope="scope">
            <span :class="{ 'black': scope.row.black }">{{scope.row.black|isBlack}}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="recordsCarVO.personName" label="车主姓名"></el-table-column>
        <el-table-column prop="deviceVO.remarkName" label="通行检测点"></el-table-column>
        <el-table-column label="通行状态">
          <template slot-scope="scope">
            <span class="black" :class="{ 'enter':isEnter( scope.row.deviceVO.iotBizEnumName) }">
              {{scope.row.deviceVO.iotBizEnumName}}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="140px" align="center">
          <span class="detail-button" slot-scope="scope" @click="handleDialog(scope.row)">
            查看详情
          </span>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      hide-on-single-page
      background
      layout="total,prev, pager, next, jumper"
      :current-page="page.pageNo"
      :page-size="page.pageSize"
      :total="page.total"
      class=" pagination"
      @current-change="handlePageChange"
    />
    <el-dialog
      :visible.sync="visible"
      :width="handleScreenWidthToVw(574)+'px'"
      :title="dialogTitle"
    >
      <div class="car-content flex">
        <div class="flex-column-center mg-lr-20">
          <img class="license-plate-number" />
          <div class="license-plate-label">车牌号</div>
        </div>

        <el-form class="flex-sub">
          <el-form-item label="车牌号:">{{formData.recordsCarVO.carNo}}</el-form-item>
          <el-form-item label="车主:">{{formData.recordsCarVO.personName}}</el-form-item>
          <el-form-item v-if="page.identityEnum==='VISITOR'" label="预约时间:">
            {{formData|isSNull|dateTimeFormatter
            }}
            - {{formData|isENull|dateTimeFormatter}}
          </el-form-item>
          <el-form-item label="通行时间:">
            {{formData.createTime|dateTimeFormatter}}
          </el-form-item>
          <el-form-item label="通行区域:">{{formData.deviceVO.remarkName}}</el-form-item>
          <el-form-item label="通行状态:">{{formData.deviceVO.iotBizEnumName}}</el-form-item>
        </el-form>
      </div>
      <div class="flex-column-center flex-sub">
        <img class="license-plate-number" />
        <div class="license-plate-label">通行记录</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QueryContainer from '@/components/query-container'
import { handleScreenWidthToVw } from '@/utils/tools'
import { MAX_INTEGER } from '@/consts'
import { findAccessControlLogPageByParams, findDevicePageByParam } from '../passing-logs/api.js'
export default {
  name: 'CarPassingLogs',
  components: {
    QueryContainer,
  },
  filters: {
    isBlack(black) {
      return black ? '是' : '否'
    },
  },
  data() {
    return {
      visible: false,
      page: {
        carOnly: true,
        identityEnum: undefined,
        keyword: '',
        licensePlate: '',
        iotBizEnum: undefined,
        pageNo: 1,
        name: '',
        black: undefined,
        regionId: '',
        pageSize: 13,
        total: null,
      },
      formData: {
        appointmentVO: null,
        deviceVO: {
          activeTime: null,
          remarkName: '',
          iotBizEnumName: '',
        },
        recordsCarVO: {
          carNo: '',
          personName: '',
        },
      },
      tableData: [],
      regionDate: [],
    }
  },
  computed: {
    deviceQuery() {
      return {
        alg: false,
        location: true,
        enableStateEnum: 'ENABLE',
        excludeBusinessTypeEnum: 'DEVICE',
        // gatewayId: '',
        // keyword: '',
        // netTypeEnum: undefined,
        // online: undefined,
        // productId: '',
        // regionId: '',
        pageSize: MAX_INTEGER,
        pageNo: 1,
        total: 20,
      }
    },
    typeOptions() {
      return [
        { name: '园内车辆', value: 'INTERNAL_MEMBER' },
        { name: '园外车辆', value: 'VISITOR' },
      ]
    },
    innerState() {
      return [
        { value: 'CAR_ENTER', label: '进入' },
        { value: 'CAR_LEAVE', label: '出去' },
      ]
    },
    blacks() {
      return [
        { value: false, label: '否' },
        { value: true, label: '是' },
      ]
    },
    dialogTitle() {
      const res = this.page.identityEnum === 'INTERNAL_MEMBER' ? '园内车辆' : '访客车辆'
      return '记录详情-' + res
    },
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
  },
  created() {
    this.getData()
    this.getDevicList()
  },
  methods: {
    handleDialog(log) {
      this.formData = log
      this.visible = true
    },
    isEnter(enter) {
      return enter === '人员进入'
    },
    async getDevicList() {
      const { records } = await findDevicePageByParam(this.deviceQuery)
      this.deviceData = records
    },
    handleTabChange() {
      this.getData()
      this.handleReset()
    },
    resetForm() {
      this.page = {
        carOnly: true,
        identityEnum: undefined,
        keyword: '',
        licensePlate: '',
        iotBizEnum: undefined,
        pageNo: 1,
        black: undefined,
        regionId: '',
        pageSize: 13,
        total: null,
      }
    },
    async getData() {
      const { total, records } = await findAccessControlLogPageByParams(this.page)
      this.tableData = records
      this.page.total = total
    },
    handlePageChange(pageNo) {
      this.page.pageNo = pageNo
      this.getData()
    },
    handleSearch() {
      console.log(this.page)
      this.getData()
    },
    handleReset() {
      this.resetForm()
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
.passing-logs {
  padding: vh(20px) vw(20px);
}

.query-container {
  padding: 0 0 vh(20px) 0;
}

.car-content {
  width: vw(390px);
  border-right: 1px solid #ccc;
}

.license-plate-number {
  width: vw(118px);
  height: vw(118px);
  border-radius: 50%;
}

.license-plate-label {
  line-height: vh(60px);
  text-align: center;
}

.black {
  color: #d12d1f;
}

.enter {
  color: #67c23a;
}

.detail-button {
  font-size: vw(14px);
  color: #0084ee;
  cursor: pointer;

  & :hover {
    opacity: 0.7;
  }
}

.select-width {
  width: vw(300px);
}

::v-deep {
  .el-tabs__item.is-active {
    color: #d12d1f;
  }

  .el-tabs__active-bar {
    background-color: #d12d1f;
  }

  .el-date-editor .el-range__icon {
    float: right;
  }

  .el-form-item {
    margin-bottom: 0;
    font-size: vw(14px);
  }

  .el-dialog__header {
    padding: vh(20px) vw(20px) 0 vw(20px);
  }

  .el-dialog__body {
    display: flex;
    padding: vh(20px) 0;
  }

  .el-form-item__label {
    font-size: vw(14px);
  }

  .el-form-item__content {
    font-size: vw(14px);
  }
}
</style>
